<template>
  <div class="main">
    <el-button @click="state.show1 = true">默认弹窗</el-button>
    <Dialog1 v-model:show="state.show1" />
    <el-button @click="state.show2 = true">hiddenStyle</el-button>
    <Dialog2 v-model:show="state.show2" :hiddenStyle="true" />
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  getCurrentInstance,
  onMounted,
  reactive,
  ref,
  watch,
} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Dialog1 from './dialog1.vue'
import Dialog2 from './dialog2.vue'

const { proxy } = getCurrentInstance()
const state: any = reactive({
  show1: false,
  show2: false,
})
const ref_form = ref()

onMounted(() => {})
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow-y: auto;
  .content {
    display: flex;
    gap: 20px;
    > div {
      flex: 1;
      height: fit-content;
      border: 4px solid #ccc;
    }
  }
}
</style>
